<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
    <c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
  <head>
    <title>用户注册</title>
	
    <meta name="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="${path }/static/bootstrap.min.css" />
<script src="${path }/static/jquery.min.js"></script>
<script src="${path }/static/js/bootstrap.min.js"></script>
 <script type="text/javascript">
       function login(){
          window.location.href="login";
       }
    
		function getImage(){
	    		   /* JQuery 设置请求为同步 */
	    			$.ajaxSetup({async: false});
	    			/* JQuery 发起get请求 */
	    			$.get("<c:url value="/code/getImage"/>",null,function(data,status){
	    				//回调函数
						//alert($("#codeimg").attr("src"));
	    				$("#codeimg").attr("src","<c:url value="/code/getImage"/>?"+Math.random());
	    			});
			}
		
		
       $(document).ready(function(){
    	   var userNameValidate=false,passWordValidate=false,repassWordValidate=false;emailValidate=false;
    	   var isValidate=false;
    	   var isNotExsit=false;
    	   var isCodeRight=false;
    	   var isEmailExist=false;
    	   
    	   $("#code").blur(function(){
    		    var code=$(this).val();
    			//alert(code);
    			 /* JQuery 设置请求为同步 */
    			$.ajaxSetup({async: false});
    			/* JQuery 发起get请求 */
    			
    			$.get("<c:url value="/code/isCodeRight"/>",{code:code},function(data,status){
    				if(data.flag == 1){
    					isCodeRight = true;
    				}else{
    					isCodeRight = false;
    				}
    			});
    			
    			if(isCodeRight) {
    				$("#code_info").html('<span class="glyphicon glyphicon-ok"></span><span style="color: red;"></span>');
    				isCodeRight = true;
    			}else{
    				$("#code_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">验证码错误</span>');
    				isCodeRight = false;
    			}
    	   });
    	   
    	   
    	   
    	   $("#username").blur(function(){
    		   var username=$(this).val() ;
    		   /* JQuery 设置请求为同步 */
    			$.ajaxSetup({async: false});
    			/* JQuery 发起get请求 */
    			$.get("user/exsit",{username:username},function(data,status){
    				//得到返回数据
    				var dataObj = eval(data);
    				var flag = dataObj.flag;
    				//alert("flag="+flag);
    				if (flag==0) {
    					isNotExsit=true;
    				}else{
    					isNotExsit=false;
    				}
    			});
    		   var reg=/[a-zA-Z0-9]{3,16}/;
    		   if(isNullOrBlankOrUD(username)){
    			  $("#userName_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">用户不能为空</span>');
                  userNameValidate=false;
    		   }else if(!reg.test(username)){
    			   $("#userName_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">输入格式不对</span>');
    			    userNameValidate=false;
    		   }else if(isNotExsit==false){
    			   $("#userName_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">用户名已注册</span>');;
    			   userNameValidate=false;
    		   }else{
    			   $("#userName_info").html('<span class="glyphicon glyphicon-ok"></span><span style="color: red;"></span>');
    				  userNameValidate=true;
    		   }
    		   
    	   });
    	  
           	$("#password").blur(function(){
    				var val = $(this).val();
    				var reg = /[a-zA-z0-9]{6,25}/;
    				if(isNullOrBlankOrUD(val)){
    					$("#password_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 登录密码为必填项</span>');
    					passwordValidate = false;
    				}else if(!reg.test(val)){
    					$("#password_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 必须由6-25位的字母或数字组成</span>');
    					passwordValidate = false;
    				}else{
    					$("#password_info").html('<span class="glyphicon glyphicon-ok"></span>');
    					passwordValidate = true;
    				}
    			});
    			$("#repassword").blur(function(){
    				var val = $(this).val();
    				var password = $("#password").val();
    				var reg = /[a-zA-z0-9]{6,25}/;
    				if(isNullOrBlankOrUD(val)){
    					$("#repassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 重复密码为必填项</span>');
    					repasswordValidate = false;
    				}else if(!reg.test(val)){
    					$("#repassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 必须由6-25位的字母或数字组成</span>');
    					repasswordValidate = false;
    				}else if(val != password){
    					$("#repassword_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 重复密码必须与登录密码一致</span>');
    					repasswordValidate = false;
    				}else{
    					$("#repassword_info").html('<span class="glyphicon glyphicon-ok"></span>');
    					repasswordValidate = true;
    				}
    			});
    			
    			// 验证邮箱唯一性
    			$("#email").blur(function(){
    				var val = $(this).val();
    				var password = $("#email").val();
    				var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
   	    			//alert(code);
   	    			 /* JQuery 设置请求为同步 */
   	    			$.ajaxSetup({async: false});
   	    			/* JQuery 发起get请求 */
   	    			$.get("<c:url value="/user/isEmailExist"/>",{email:val},function(data,status){
   	    				if(data.flag == 1){
   	    					isEmailExist = true;
   	    				}else{
   	    					isEmailExist = false;
   	    				}
   	    			});
    				if(isNullOrBlankOrUD(val)){
    					$("#email_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 邮箱必填项</span>');
    					emailValidate = false;
    				}else if(!reg.test(val)){
    					$("#email_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 邮箱格式错误</span>');
    					emailValidate = false;
    				}else if(isEmailExist){
    					$("#email_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 邮箱已被使用</span>');
    					emailValidate = false;
    				}else{
    					emailValidate = true;
    					$("#email_info").html('<span class="glyphicon glyphicon-ok"></span><span style="color: red;"></span>');
    				}
    			});
             
    		 $("#register_form").submit(function(){
    				isValidate = userNameValidate&&passwordValidate&&repasswordValidate&&emailValidate&&isCodeRight;
    				return isValidate;
    			});


       });
       
           function isNullOrBlankOrUD(value){
    		   if(value=="" ||value==null ||value==undefined){
    			  return true;
    		   }else{
    			  return false;
    		   }
          }
    </script>
  </head>
  <body>
      <div class="container">
    <jsp:include page="/head"></jsp:include>
      <div class="panel panel-info" style="width: 1000px;margin-left: 120px;margin-top:52px;height: 550px">
         <div class="panel-heading"  style="height: 50px">
           <h2 class="panel-title pull-left" style="margin-top: 10px">用户注册</h2>
         </div>
		 
        <div class="panel-body">
              <form id="register_form" class="form-horizontal" role="form" action="<c:url value='/user/register'></c:url>" method="post" >
		     <fieldset>
			  <!--   <legend>用户注册</legend> -->
				<div class="form-group">
				   <label class="col-sm-2 control-label" for="username">用户名</label>
				    
				   <div class="col-sm-3">
				      <input id="username" type="text" name="userName" placeholder="用户名"
					  class="form-control" autofocus="autofocus"/>  
				   </div>
				   <span id="userName_info"><span class="glyphicon glyphicon-user"></span><span class=" info_text"> 必填，由3-16位的字母或数字组成</span></span>
				</div>
				<div class="form-group">
				   <label class="col-sm-2 control-label" for="password">密码</label>
				
				   <div class="col-sm-3">
				      <input id="password" type="password" name="password" placeholder="请输入密码"
					  class="form-control"/>
				   </div>
				   <span id="password_info"><span class="glyphicon glyphicon-lock"></span><span class=" info_text"> 必填，由6-25位的字母或数字组成</span></span>
				</div>
				<div class="form-group">
				   <label class="col-sm-2 control-label" for="repassword">确认密码</label>
				
				   <div class="col-sm-3">
				      <input id="repassword" type="password" name="repassword" placeholder="请输入确认密码"
					  class="form-control"/>
				   </div>
				   <span id="repassword_info"><span class="glyphicon glyphicon-lock"></span><span class=" info_text">  必填，由6-25位的字母或数字组成</span></span>
				</div>
				<div class="form-group">
				   <label class="col-sm-2 control-label" for="email">邮箱账号</label>
				   <div class="col-sm-3">
				      <input id="email" type="email" name="email" placeholder="请输入邮箱号"
					  class="form-control"/>
				   </div> 
				   <span id="email_info"><span class="glyphicon glyphicon-lock"></span><span class="info_text">  必填，请输入正确的邮箱号</span></span>
				</div>
				
				<div class="form-group">
				   <label class="col-sm-2 control-label" for="code">验证码</label>
				   <div class="col-sm-3">
				      <input id="code" type="text" name="code" placeholder="请输入验证码"
					  class="form-control"/>
					  <img id="codeimg" src="<c:url value="/code/getImage"/>" style="margin-top:10px;"/> <span onclick="getImage()" class="btn btn-sm btn-link" style="margin-top:10px;">看不清楚?</span>
				   </div>
				   <span id="code_info"><span class="glyphicon glyphicon-lock"></span><span class=" info_text">  必填，请输入验证码</span></span>
				</div>
				
			 </fieldset>
			 <div class="form-group">  
            <div class="col-sm-offset-2 col-sm-10">  
             <button type="submit" class="btn btn-primary">提交</button>
			 <button type="reset" class="btn btn-primary" style="margin-left: 60px">重置</button>  
            </div>  
        </div>
		 </form>
	  </div>
  </body>
</html>
